<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-button
					text="基础使用"
					theme="primary"
					@onClick="showBaseUse = true"
					block
				></pure-button>
				<pure-dialog
					:show="showBaseUse"
					@onClose="showBaseUse = false"
					:title="title"
					@onConfirm="showBaseUse = false"
				>
					<view class="content">
						<rich-text :nodes="content"></rich-text>
					</view>
				</pure-dialog>
			</pj-demo>

			<!-- 关闭按钮 -->
			<pj-demo title="关闭按钮">
				<pure-button
					text="关闭按钮"
					theme="success"
					@onClick="showClose = true"
					block
				></pure-button>
				<pure-dialog
					:show="showClose"
					@onClose="showClose = false"
					:title="title"
					showClose
					@onConfirm="showClose = false"
				>
					<view class="content">
						<rich-text :nodes="content"></rich-text>
					</view>
				</pure-dialog>
			</pj-demo>

			<!-- 隐藏Footer -->
			<pj-demo title="隐藏Footer">
				<pure-button
					text="隐藏Footer"
					theme="warning"
					@onClick="showNoneFooter = true"
					block
				></pure-button>
				<pure-dialog
					:show="showNoneFooter"
					@onClose="showNoneFooter = false"
					:title="title"
					:cancel="false"
					:confirm="false"
				>
					<view class="content">
						<rich-text :nodes="content"></rich-text>
					</view>
				</pure-dialog>
			</pj-demo>

			<!-- 取消按钮 -->
			<pj-demo title="取消按钮">
				<pure-button
					text="取消按钮"
					theme="danger"
					@onClick="showCancel = true"
					block
				></pure-button>
				<pure-dialog
					:show="showCancel"
					@onClose="showCancel = false"
					:title="title"
					cancel
					@onCancel="showCancel = false"
					@onConfirm="showCancel = false"
				>
					<view class="content">
						<rich-text :nodes="content"></rich-text>
					</view>
				</pure-dialog>
			</pj-demo>

			<!-- 自定义底部内容 -->
			<pj-demo title="自定义底部内容">
				<pure-button
					text="自定义底部内容"
					theme="info"
					@onClick="showCustomFooter = true"
					block
				></pure-button>
				<pure-dialog
					:show="showCustomFooter"
					@onClose="showCustomFooter = false"
					:title="title"
					cancel
				>
					<view
						class="content"
						style="padding-bottom: 10px"
					>
						<rich-text :nodes="content"></rich-text>
					</view>
					<template #footer>
						<view class="footer">作者：唐·李白</view>
					</template>
				</pure-dialog>
			</pj-demo>

			<!-- 自定义宽高 -->
			<pj-demo title="自定义宽高">
				<pure-button
					text="自定义高度"
					theme="primary"
					@onClick="showMaxHeight = true"
					block
				></pure-button>
				<pure-dialog
					:show="showMaxHeight"
					@onClose="showMaxHeight = false"
					:title="title"
					cancel
					max-width="75%"
					max-height="350px"
				>
					<view class="content">
						<rich-text :nodes="content"></rich-text>
					</view>
					<template #footer>
						<view class="footer">作者：唐·李白</view>
					</template>
				</pure-dialog>
			</pj-demo>

			<!-- 显示分割线 -->
			<pj-demo title="显示分割线">
				<pure-button
					text="显示分割线"
					theme="success"
					@onClick="showLine = true"
					block
				></pure-button>
				<pure-dialog
					:show="showLine"
					@onClose="showLine = false"
					:title="title"
					cancel
					headerLine
					footerLine
					buttonLine
					:cancelOpts="{ ghost: true, plain: true, theme: 'danger' }"
					:confirmOpts="{ ghost: true, plain: true }"
					@onConfirm="showLine = false"
					@onCancel="showLine = false"
				>
					<view
						class="content"
						style="padding: 16px 0"
					>
						<rich-text :nodes="content"></rich-text>
					</view>
				</pure-dialog>
			</pj-demo>

			<!-- 不显示遮罩 -->
			<pj-demo title="不显示遮罩">
				<pure-button
					text="不显示遮罩"
					theme="warning"
					@onClick="showMask = true"
					block
				></pure-button>
				<pure-dialog
					:show="showMask"
					@onClose="showMask = false"
					:title="title"
					@onConfirm="showMask = false"
					:mask="false"
				>
					<view class="content">
						<rich-text :nodes="content"></rich-text>
					</view>
				</pure-dialog>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref, computed } from "vue";
	import { onLoad, onReady, onShow } from "@dcloudio/uni-app";

	// **************************************************************************************************************
	// * Refs
	// **************************************************************************************************************
	const showBaseUse = ref(false);
	const showClose = ref(false);
	const showNoneFooter = ref(false);
	const showCancel = ref(false);
	const showCustomFooter = ref(false);
	const showMaxHeight = ref(false);
	const showLine = ref(false);
	const showMask = ref(false);

	// 内容
	const title = ref("《将近酒》");
	const content = ref(`
		<p>君不见，黄河之水天上来，奔流到海不复回。</p>
		<p>君不见，高堂明镜悲白发，朝如青丝暮成雪。</p>
		<p>人生得意须尽欢，莫使金樽空对月。</p>
		<p>天生我材必有用，千金散尽还复来。</p>
		<p>烹羊宰牛且为乐，会须一饮三百杯。</p>
		<p>岑夫子，丹丘生，将进酒，君莫停。</p>
		<p>与君歌一曲，请君为我倾耳听。</p>
		<p>钟鼓馔玉不足贵，但愿长醉不愿醒。</p>
		<p>古来圣贤皆寂寞，惟有饮者留其名。</p>
		<p>陈王昔时宴平乐，斗酒十千恣欢谑。</p>
		<p>主人何为言少钱，径须沽取对君酌。</p>
		<p>五花马，千金裘，</p>
		<p>呼儿将出换美酒，与尔同销万古愁。</p>
	`);
</script>

<!-- 自定义动画不要放到 scoped 中，因为编译后名称会变，导致不生效 -->
<style lang="scss" scoped>
	.page {
		.content {
			line-height: 1.75;
			text-align: justify;
		}

		.footer {
			font-size: var(--pure-font-size-small);
			color: var(--pure-text-color-regular);
			text-align: right;
			padding: 10px 16px;
			width: 100%;
			background: var(--pure-background-light);
			border-radius: 0 0 var(var(--pure-radius-default)) var(var(--pure-radius-default));
		}
	}
</style>
